<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <card-detail title="总销售额" :count="'￥' + chartData.salesTotal">
          <template slot="charts" >
            <div class="rate-box">
              <span>周同比&nbsp;&nbsp;&nbsp;{{chartData.salesGrowthLastDay}}% <svg t="1649901349601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4327" width="200" height="200"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" p-id="4328" fill="#2aa515"></path></svg></span>
              <span>日同比&nbsp;&nbsp;&nbsp;{{chartData.salesGrowthLastMonth}}%  <svg t="1649901191767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4137" width="200" height="200"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="4138" fill="#d81e06"></path></svg></span>
            </div>
          </template>
          <template slot="footer" >
            <div class="footer">
              日销售: ￥{{chartData.salesToday}}
            </div>
          </template>
        </card-detail>
      </el-col>
      <el-col :span="6">
        <card-detail title="访问量" :count="chartData.visitTotal">
          <template slot="charts" >
            <line-charts></line-charts>
          </template>
          <template slot="footer" >
            <div class="footer">
              日访问量: {{chartData.visitToday}}
            </div>
          </template>
        </card-detail>
      </el-col>
      <el-col :span="6">
        <card-detail title="支付数量" :count="chartData.payTotal">
          <template slot="charts" >
            <bar-charts ></bar-charts>
          </template>
          <template slot="footer" >
            <div class="footer">
              转换率: {{chartData.payRate}}%
            </div>
          </template>
        </card-detail>
      </el-col>
      <el-col :span="6">
        <card-detail title="运营活动效果" count="80%">
          <template slot="charts" >
            <div class="charts">
              <progress-charts></progress-charts>
            </div>
          </template>
          <template slot="footer" >
            <div class="rate-box">
              <span>周同比&nbsp;&nbsp;&nbsp;22.67% <svg t="1649901349601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4327" width="200" height="200"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" p-id="4328" fill="#2aa515"></path></svg></span>
              <span>日同比&nbsp;&nbsp;&nbsp;24.99%  <svg t="1649901191767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4137" width="200" height="200"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="4138" fill="#d81e06"></path></svg></span>
            </div>
          </template>
        </card-detail>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CardDetail from './cardDetail.vue'
import LineCharts from './lineCharts.vue'
import BarCharts from './barCharts.vue'
import ProgressCharts from './progressCharts.vue'
import {mapGetters} from 'vuex'
export default {
  components: {
    CardDetail,
    LineCharts,
    BarCharts,
    ProgressCharts
  },
  data() {
    return {

    }
  },
  computed:{
    ...mapGetters([
      'chartData'
    ])
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style lang='less' scoped>
  .rate-box{
    display: flex;
    justify-content: space-between;
    svg{
      width: 10px;
      height: 10px;
    }
  }
  .charts{
    width: 100%;
    height: 100%;
  }
</style>
